<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数</title>
</head>
<body>
    <script>
        /**
         * 箭头函数内的this是静态的，它指向的是箭头函数定义处所在的作用域中this的值(定义在函数内那么this指向的就是外层的函数)
         * (除此之外都是全局作用域)
        */
        let user ={
            num: 12,
            foo1: function(){
                console.log(this.num);
            },
            //这里的箭头函数定义在对象内部,this指向的是全局作用域
            foo2:()=>{
                console.log(this.num);

            }
        
        }

        // user.foo1();
        // user.foo2();


        function Animal() {
            this.name ='Alice';
            this.foo1=function(){
                console.log(this.name);
            };
            //这里的箭头函数定义在函数内部,this指向的是外层的函数作用域下this的值(即外层函数调用者)
            this.foo2=()=>console.log(this.name);
          }


        //   let animal = new Animal();z
        //   animal.foo1();
        //   animal.foo2();

        let obj = {
            username:'Jack'
        }

        function func1(){
            console.log(this.username);
            /***
             * this所在的是函数作用域，那么箭头函数中的this指向的是函数中的this即函数的调用者
             */
            let foo = ()=>console.log(this.username);
            foo()
        }

        function func2(){
            console.log(this.username);

            /**
             * 函数内部函数的调用，如果没有指定如何调用即window.函数名的方式
            */
            let foo =function(){
                console.log(this.username);
            }
            foo();

        }

        /***
         * 将函数的内部函数定义为箭头函数可以保证内部函数的this指向与外部函数一致
         */

     
        func1.call(obj);

        console.log("---------------");

        func2.call(obj);

  
</script>
</body>
</html>